Skip to main content

Chapter 1: Introduction to Dora: Getting Started with Game Development

In this chapter, we will embark on a learning journey with the Dora game engine. You will learn the basic concepts of Dora, set up the development environment, and create your first simple game project, laying a solid foundation for the subsequent lessons.

Tip

In this tutorial, we will write game code using the TSX language. If you're not familiar with TSX, it's recommended to first read Dora's TSX Beginner Tutorial. For a deeper understanding of programming languages, you may also refer to the official documentation of TypeScript and JSX. However, for this series of tutorials, it's sufficient to grasp the basics of TSX syntax, or you can just experiment with your programming knowledge and experience.

1. What is Dora?​

Dora is an open-source, cross-platform game engine designed to help developers quickly build games on various devices. It comes with an easy-to-use development toolchain that supports game development and programming learning on devices like smartphones, open-source handhelds, and more. With Dora, developers can write game logic using multiple programming languages such as Lua, Teal, TypeScript, and YueScript, significantly lowering the development barrier.

2. Setting Up the Development Environment​

Dora offers flexible installation methods depending on your operating system. Please follow the steps below according to your device's system.

  1. Download and install the Dora SSR software on your gaming terminal. For detailed installation steps, please refer to the installation guide here.
  2. Run the application. If Mobile UI opens, select Classic UI at the top left of the Feed to find the Web IDE server address.
  3. On a PC, tablet, or other development devices within the same network, access the server address through your browser.
  4. Now, you can start game development directly in the browser.

3. Writing Your First Game Program​

After the installation, you can write and run games using Dora's Web IDE. Below are the steps to create your first simple project.

Step 1: Create a New Project​

  1. Open the browser and visit the server address displayed when you launched the software to access Dora's Web IDE.
  2. Right-click the Workspace root in the Web IDE resource tree on the left (or touch and hold).
  3. Select New → Folder, enter Hello, enable Create as Project, set Project Type to TSX, and select OK. The editor creates Hello/init.tsx and opens the Dora conversation tab.

Step 2: Write Game Code​

  1. Expand Hello in the resource tree and open the generated init.tsx.

  2. Replace its contents with the following example:

    Hello/init.tsx
    // @preview-file on clear
    import { React, toNode } from 'DoraX';

    // Create a node to display text
    const HelloDora = () => (
    	<label fontName='sarasa-mono-sc-regular' fontSize={60} text='Hello, Dora!'/>
    );

    // Add the node to the game interface
    toNode(<HelloDora/>);

  3. Save with Ctrl + S (⌘ + S on macOS). The example's // @preview-file on clear directive runs the current file and clears the log when you save changes, displaying "Hello, Dora!" in the engine window. Files without a preview directive need to be run manually.

Step 3: Run the Game Again​

  1. Keep Hello/init.tsx open and locate the triangular Run toolbar button. The toolbar is at the bottom right on wide desktop layouts and at the top in compact layouts.
  2. Click Run, or press Ctrl + R (⌘ + R on macOS), to run the whole project. The square Stop button ends the game.
  3. The program will automatically recompile and run, and you should see the text "Hello, Dora!" in the game window.

4. Exploring Dora's Developer Tools​

Dora's Web IDE provides developers with features such as code editing, resource management, and real-time preview:

  • Resource Tree: Displays the project's files and folders on the left, making it easy to organize the project structure.
  • Code Editor: Supports syntax highlighting and error messages for multiple languages, including Lua, Teal, TypeScript, and YueScript.
  • Real-Time Preview: Enable @preview-file on or @preview-project on to run the current file or its project automatically when saving changes.

With these features, you can easily write, debug, and run your games.

5. Summary and Outlook​

In this chapter, you learned how to install Dora on various platforms, set up the development environment, create your first simple game project, and get familiar with the basic usage of Dora's Web IDE. You've laid a solid foundation for the upcoming lessons.

When it comes to game development, designing the game is a key part. In this tutorial series, we will guide you step by step through the creation of a game called Dodge the Creeps. Here's an overview of the game design:

  • Dodge the Creeps is a simple yet challenging survival game where players must continuously avoid enemies coming from all directions and survive as long as possible. The design concept includes the following core elements:

  • Game Objective: Players control a character moving on the screen and avoid enemies coming from random directions. The goal is to survive as long as possible while earning points that gradually increase, showing the player's survival skills.

  • Enemy Generation and Movement: Enemies spawn from random positions on the screen edges and move towards the player at a certain speed. As the game progresses, the speed and/or number of enemies increase, raising the difficulty.

  • Player Character Control: Players can control the character's movement up, down, left, and right via keyboard or gamepad. The character's movement needs to be agile to help the player avoid enemy attacks.

  • Collision Detection and Game Over: When the player collides with an enemy, the game ends. A score and "Game Over" message will appear, providing simple feedback to the player.

  • Start Screen and Score Display: The game begins with a simple start screen. Players click the start button to enter the game. During gameplay, the score is displayed on the screen in real-time.

The core design of Dodge the Creeps is straightforward but tests the player's reaction speed and strategic thinking, making it a great practice project for beginners. Starting from the next tutorial, we will implement these designs step by step and build the full game. We hope you'll follow along with us to complete this project!